<template>
  <div class="step-content">
    <el-form
      ref="examineSetForm"
      :model="examineSetForm"
      :rules="examineRules"
      label-width="150px"
      class="form-style"
    >
      <el-form-item v-if="sonSteps==1" label="标题名称" prop="titleName">
        <el-input v-model="examineSetForm.titleName" placeholder="请输入标题" style="width:600px;" />
      </el-form-item>
      <el-form-item v-if="sonSteps==1" label="试卷" prop="testPaper">
        <el-autocomplete
          v-model="examineSetForm.testPaper"
          :fetch-suggestions="querySearchAsync"
          placeholder="请选择试卷"
          style="width:600px;"
          @select="handleSelect"
        />
        <div class="info-hint">如果找不到试卷，请先确定该试卷已经发布</div>
      </el-form-item>
      <el-form-item v-if="sonSteps==1" label="考试时长" prop="durationTime">
        <el-input v-model="examineSetForm.durationTime" style="width:300px;">
          <template slot="append">分</template>
        </el-input>
        <div class="info-hint">0分钟，表示无限制</div>
      </el-form-item>
      <el-form-item v-if="sonSteps==1" label="考试次数" prop="examNum">
        <el-radio-group v-model="examineSetForm.examNum">
          <el-radio label="unlimited">不限</el-radio>
          <el-radio label="once">单次</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="sonSteps==1" label="重考间隔" prop="examInterval">
        <el-input v-model="examineSetForm.examInterval" style="width:300px;">
          <template slot="append">小时</template>
        </el-input>
        <div class="info-hint">0小时，表示无限制</div>
      </el-form-item>
      <el-form-item v-if="sonSteps==2" label="完成条件">
        <span>考试成绩达到60分。</span>
      </el-form-item>
    </el-form>
    <div class="step-btn">
      <el-button v-if="sonSteps==1" type="info" @click="goStep0">上一步</el-button>
      <el-button v-if="sonSteps==1" type="info" @click="goStep2">下一步</el-button>
      <el-button v-if="sonSteps==2" type="info" @click="goStep1">上一步</el-button>
      <el-button v-if="sonSteps==2" type="primary" @click="submitSave">保 存</el-button>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    steps: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      sonSteps: this.steps,
      examineSetForm: {
        titleName: '',
        testPaper: '',
        durationTime: '',
        examNum: 'unlimited'
      },
      examineRules: {
        titleName: [{ required: true, message: '请输入标题', targger: 'blur' }],
        testPaper: [{ required: true, message: '请选择试卷', targger: 'blur' }],
        durationTime: [{ required: true, message: '请输入时长', targger: 'blur' }],
        examInterval: [{ required: true, message: '请输入间隔时间', targger: 'blur' }]
      },
      init: {
        selector: '#editor',
        language: 'zh_CN',
        height: 100
      }
    }
  },
  mounted() {
    this.restaurants = this.loadAll()
  },
  methods: {
    goStep0() {
      this.$emit('nowStep0')
    },
    goStep1() {
      this.sonSteps = 1
      this.$emit('nowStep1')
    },
    goStep2() {
      this.$refs.examineSetForm.validate((valid) => {
        if (valid) {
          this.sonSteps = 2
          this.$emit('nowStep2')
        } else {
          return false
        }
      })
    },
    submitSave() {
      this.$emit('saveInfo')
    },
    loadAll() {
      return [
        { "value": "高三数学", "address": "上海市长宁区天山西路" },
        { "value": "语文模拟", "address": "上海市长宁区金钟路968号15楼15-105室" },
      ]
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      console.log(item);
    }
  }
}
</script>
<style lang="scss" scoped>
.step-content {
  min-height: 50px;
  .form-style {
    min-height: 80px;
    border-bottom: 1px solid #eee;
    margin-top: 20px;
    padding: 0 20px;
  }
  .step-btn {
    margin-top: 20px;
    text-align: right;
  }
  .info-hint {
    color: #a1a1a1;
  }
}
</style>
